<template>
  <div class="cost-forecast">
    <div class="toolbar">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/forecast' }">智能预测</el-breadcrumb-item>
        <el-breadcrumb-item>成本预测</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="toolbar-actions">
        <el-select v-model="selectedCostType" placeholder="成本类型" style="width: 150px; margin-right: 10px">
          <el-option label="全部成本" value="all" />
          <el-option label="生产成本" value="production" />
          <el-option label="采购成本" value="purchase" />
          <el-option label="运营成本" value="operation" />
        </el-select>
        <el-button type="primary" @click="handleForecast">
          <el-icon><MagicStick /></el-icon>
          开始预测
        </el-button>
        <el-button @click="handleExport">
          <el-icon><Download /></el-icon>
          导出报告
        </el-button>
      </div>
    </div>

    <!-- 成本概览 -->
    <el-row :gutter="20" class="overview-cards">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="overview-item">
            <div class="overview-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)">
              <el-icon :size="30"><Money /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-value">¥{{ costData.totalCost }}</div>
              <div class="overview-label">预测总成本</div>
              <div class="overview-trend up">
                <el-icon><Top /></el-icon> +8.5%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="overview-item">
            <div class="overview-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)">
              <el-icon :size="30"><Coin /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-value">¥{{ costData.unitCost }}</div>
              <div class="overview-label">单位成本</div>
              <div class="overview-trend down">
                <el-icon><Bottom /></el-icon> -2.3%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="overview-item">
            <div class="overview-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)">
              <el-icon :size="30"><TrendCharts /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-value">{{ costData.costRate }}%</div>
              <div class="overview-label">成本占比</div>
              <div class="overview-trend down">
                <el-icon><Bottom /></el-icon> -1.2%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="overview-item">
            <div class="overview-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)">
              <el-icon :size="30"><WalletFilled /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-value">¥{{ costData.savingCost }}</div>
              <div class="overview-label">预计节省</div>
              <div class="overview-trend up">
                <el-icon><Top /></el-icon> +12.8%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 成本趋势预测 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span><el-icon><TrendCharts /></el-icon> 成本趋势预测</span>
            </div>
          </template>
          <div ref="costTrendChartRef" style="height: 400px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <span><el-icon><PieChart /></el-icon> 成本结构分析</span>
          </template>
          <div ref="costStructureChartRef" style="height: 400px"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 成本明细预测表 -->
    <el-card shadow="hover" style="margin-top: 20px">
      <template #header>
        <div class="card-header">
          <span><el-icon><List /></el-icon> 成本明细预测</span>
        </div>
      </template>
      <el-table :data="costDetailData" stripe style="width: 100%" show-summary>
        <el-table-column prop="costType" label="成本类型" width="150" />
        <el-table-column prop="currentCost" label="当前成本(万元)" width="150" />
        <el-table-column prop="forecastCost" label="预测成本(万元)" width="150">
          <template #default="{ row }">
            <span style="color: #409eff; font-weight: bold">{{ row.forecastCost }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="changeRate" label="变化率" width="120">
          <template #default="{ row }">
            <el-tag :type="row.changeRate > 0 ? 'danger' : 'success'">
              {{ row.changeRate > 0 ? '+' : '' }}{{ row.changeRate }}%
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="200" />
      </el-table>
    </el-card>

    <!-- 成本优化建议 -->
    <el-card shadow="hover" style="margin-top: 20px">
      <template #header>
        <span><el-icon><Opportunity /></el-icon> 成本优化建议</span>
      </template>
      <el-timeline>
        <el-timeline-item
          v-for="(suggestion, index) in suggestions"
          :key="index"
          :color="suggestion.color"
          :timestamp="suggestion.priority"
          placement="top"
        >
          <el-card shadow="hover">
            <h4>{{ suggestion.title }}</h4>
            <p>{{ suggestion.content }}</p>
            <div class="suggestion-impact">
              <el-tag type="success">预计节省: {{ suggestion.saving }}</el-tag>
              <el-tag type="info" style="margin-left: 10px">实施难度: {{ suggestion.difficulty }}</el-tag>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

const selectedCostType = ref('all')

const costData = ref({
  totalCost: '856.3万',
  unitCost: '128.5',
  costRate: 68.5,
  savingCost: '45.6万'
})

const costDetailData = ref([
  { costType: '原材料成本', currentCost: 320.5, forecastCost: 345.2, changeRate: 7.7, remark: '受市场价格波动影响' },
  { costType: '人工成本', currentCost: 185.3, forecastCost: 198.6, changeRate: 7.2, remark: '工资上涨预期' },
  { costType: '制造费用', currentCost: 125.8, forecastCost: 132.4, changeRate: 5.2, remark: '能源成本上升' },
  { costType: '运输成本', currentCost: 78.6, forecastCost: 82.3, changeRate: 4.7, remark: '物流费用调整' },
  { costType: '管理费用', currentCost: 95.2, forecastCost: 97.8, changeRate: 2.7, remark: '办公成本增加' }
])

const suggestions = ref([
  {
    title: '优化原材料采购策略',
    content: '通过集中采购和长期合同锁定价格，预计可降低原材料成本5-8%',
    priority: '高优先级',
    color: '#f56c6c',
    saving: '¥18-25万',
    difficulty: '中'
  },
  {
    title: '提升生产效率',
    content: '引入自动化设备，提高生产效率，降低人工成本占比',
    priority: '高优先级',
    color: '#e6a23c',
    saving: '¥15-20万',
    difficulty: '高'
  },
  {
    title: '优化物流配送路线',
    content: '使用智能配送系统优化路线，降低运输成本',
    priority: '中优先级',
    color: '#409eff',
    saving: '¥8-12万',
    difficulty: '低'
  },
  {
    title: '能源管理优化',
    content: '实施能源管理系统，降低能耗成本',
    priority: '中优先级',
    color: '#67c23a',
    saving: '¥5-8万',
    difficulty: '中'
  }
])

const costTrendChartRef = ref(null)
const costStructureChartRef = ref(null)

const handleForecast = () => {
  ElMessage.success('正在执行成本预测分析...')
}

const handleExport = () => {
  ElMessage.success('报告导出成功')
}

const initCharts = () => {
  if (costTrendChartRef.value) {
    const chart = echarts.init(costTrendChartRef.value)
    const option = {
      tooltip: { trigger: 'axis' },
      legend: { data: ['实际成本', '预测成本', '预算成本'] },
      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
      },
      yAxis: { type: 'value', name: '成本(万元)' },
      series: [
        {
          name: '实际成本',
          type: 'line',
          data: [720, 745, 765, 780, 805, null, null, null],
          itemStyle: { color: '#409eff' }
        },
        {
          name: '预测成本',
          type: 'line',
          data: [null, null, null, null, 805, 825, 845, 856],
          itemStyle: { color: '#67c23a' },
          lineStyle: { type: 'dashed' }
        },
        {
          name: '预算成本',
          type: 'line',
          data: [750, 750, 750, 750, 750, 750, 750, 750],
          itemStyle: { color: '#e6a23c' },
          lineStyle: { type: 'dotted' }
        }
      ]
    }
    chart.setOption(option)
  }

  if (costStructureChartRef.value) {
    const chart = echarts.init(costStructureChartRef.value)
    const option = {
      tooltip: { trigger: 'item' },
      legend: { orient: 'vertical', left: 'left' },
      series: [
        {
          name: '成本结构',
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
            { value: 345.2, name: '原材料成本' },
            { value: 198.6, name: '人工成本' },
            { value: 132.4, name: '制造费用' },
            { value: 82.3, name: '运输成本' },
            { value: 97.8, name: '管理费用' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    chart.setOption(option)
  }
}

onMounted(() => {
  nextTick(() => {
    initCharts()
  })
})
</script>

<style scoped lang="scss">
@use './forecast-common.scss';

.suggestion-impact {
  margin-top: 10px;
}
</style>

